<template>
  <div class="address">
    <div class="title">
      <div class="text">Купоны</div>
    </div>
    <el-tabs v-model="state.tabIndex" class="demo-tabs" @tab-click="tabClickFUn">
      <el-tab-pane label="Все (8)" name="0"></el-tab-pane>
      <el-tab-pane label="Будут использованы" name="1"></el-tab-pane>
      <el-tab-pane label="Срок годности" name="2"></el-tab-pane>
    </el-tabs>
    <div class="vipList">
      <div class="vipItem" v-for="index of 8" :style="{'margin-right': index % 3 == 0 ? '0' : '46px'}">
        <img src="/src/assets/image/goodscs.png" alt="">
        <div class="centerBox">
          <div class="top">
            <div class="titleName">Весь зал доступен</div>
            <div class="text">Полностью 100 ₽доступны</div>
          </div>
          <div class="bottom">С 4 апреля по 28 мая 2024 года</div>
        </div>
        <div class="rightTopTip">Купоны</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive} from "vue"
import {Plus} from "@element-plus/icons-vue";
const state = reactive({
  tabIndex:'0'
})
</script>
<style scoped lang="less">
:deep(.el-tabs__item){
  font-family: Segoe UI, Segoe UI;
  font-weight: 600;
  font-size: 16px;
  color: #999999;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
:deep(.is-active){
  color: #0070E9;
}
:deep(.el-tabs__nav-wrap:after){
  display: none;
}
.address {
  width: 1164px;
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  padding: 20px;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #EEEEEE;

    .text {
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 24px;
      color: #333333;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .vipList{
    display: flex;
    flex-wrap: wrap;
    .vipItem{
      position: relative;
      width: 343px;
      height: 104px;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
      border-radius: 16px 16px 16px 16px;
      overflow: hidden;
      margin-bottom: 20px;
      cursor: pointer;
      img{
        width: 114px;
        height: 104px;
      }
      .centerBox{
        position: absolute;
        width: 277px;
        height: 104px;
        right: 0;
        top: 0;
        background-image: url('/src/assets/image/vipBj.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 10;
        box-sizing: border-box;
        padding-left: 50px;
        .top{
          width: 213px;
          margin-top: 12px;
          padding-bottom: 24px;
          border-bottom: 1px solid #EEEEEE;
          .titleName{
            font-family: Segoe UI, Segoe UI;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .text{
            font-family: Segoe UI, Segoe UI;
            font-weight: 600;
            font-size: 12px;
            color: #999999;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 8px;
          }

        }
        .bottom{
          width: 179px;
          height: 12px;
          font-family: Segoe UI, Segoe UI;
          font-weight: 600;
          font-size: 12px;
          color: #999999;
          line-height: 12px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-top: 10px;
        }
      }
      .rightTopTip{
        position: absolute;
        top: 15px;
        right: 0;
        z-index: 20;
        transform-origin: center;
        transform: rotate(45deg);
        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 12px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
